<style scoped>
</style>

<template>
  <div>
    <Modal
      v-model="IsModalShow"
      title="烟感设备导入"
      :mask-closable="false"
      @on-cancel="cancel"
      width="680"
    >
      <!-- <div style="padding:5px;color:#e4393c;">暂时只支持中消云烟感设备导入</div> -->
      <Row style="margin-bottom:20px;">
        <Col :span="10">
            <Select v-model="devType" placeholder="请选择" style="width:120px;">
              <Option :value="1">中消云设备</Option>
              <Option :value="2">海康设备</Option>
            </Select>
        </Col>
        <Col :span="8">
           <Button
            @click="downloadExcelTemplate"
            type="default"
            style="background-color:#fff"
            size="large"
            icon="md-bookmarks"
          >导入模版</Button>
        </Col>
        <Col :span="6">
          <Upload
            ref="upload"
            :accept="Accept"
            :headers="MyHeaders"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            :format="['xls','xlsx']"
            :on-format-error="handleFormatError"
            :action="UploadAddress"
            :data="{devType:devType}"
            class="top-btn"
          >
            <Button
              type="primary"
              size="large"
              :loading="IsUploading"
              icon="ios-cloud-upload-outline"
            >导入烟感设备</Button>
          </Upload>
        </Col>
      </Row>

      <Row v-if="tableData.length>0">
        <Table stripe size="small" :columns="tableColums" :data="tableData"></Table>
      </Row>
      <div slot="footer">
        <Button type="default" @click="cancel">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import config from "@/config";

const baseUrl =
  process.env.NODE_ENV === "development"
    ? config.baseUrl.dev
    : config.baseUrl.pro;
export default {
  props: {
    modalShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      Accept:".xlsx,.xls",
      IsModalShow: false,
      modalForm: {},
      modalForm_loading: false,
      tableColums: [
        {
          align: "center",
          title: "行号",
          key: "RowNum"
        },
        {
          align: "center",
          title: "关键字",
          key: "Keyword"
        },
        {
          align: "center",
          title: "原因",
          key: "Reason"
        }
      ],
      tableData: [],
      IsUploading: false,
      devType:1
    };
  },
  computed: {
    MyHeaders: function() {
      let myHeaders = {};
      let tokenValue = sessionStorage.getItem("token");
      if (tokenValue) {
        myHeaders.token = tokenValue;
      }
      return myHeaders;
    },
    UploadAddress: function() {
      return baseUrl + "/bss/dev/import";
    }
  },
  watch: {
    modalShow(curVal, oldVal) {
      this.IsModalShow = curVal;
      this.tableData = [];
      this.$refs["upload"].clearFiles();
    }
  },
  created() {},
  mounted() {},
  methods: {
    cancel() {
      if (!this.IsUploading) {
        this.$emit("listenModalForm");
      }
    },
    beforeUpload() {
      this.IsUploading = true;
    },
    handleSuccess(res, file) {
      this.IsUploading = false;
      let result = res;
      if (res.code == 0) {
        this.$Message.success("上传成功！");
        if (res.lstResult) {
          this.tableData = res.lstResult;
        }
        this.$emit("refreshTableList");
      } else {
        if (res.lstResult) {
          this.tableData = res.lstResult;
        }
        this.$Message.error(res.msg);
      }

      console.log(result);
    },
    handleFormatError(file) {
      this.IsUploading = false;
      this.$Notice.warning({
        title: "文件格式不对",
        desc: "上传文件格式不正确，请上传xls或xlsx格式的excel"
      });
    },
    downloadExcelTemplate() {
      const url = baseUrl + "/excel/设备导入.xlsx";
      window.open(url);
    }
  }
};
</script>
